<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<!--[if ! IE]>--> <script type="text/javascript" src="javascript/ps.js"></script> <!--<![endif]-->
<!--[if IE]> <script type="text/javascript" src="javascript/ps_ie.js"></script> <![endif]-->

</head>
<body>

<pre>
Div with scrollbars (Dynamic Scrollbar/ DHTML scrollbars): http://jsfiddle.net/gaby/Bek9L/186/
background image repeat:   http://www.w3schools.com/cssref/pr_background-repeat.asp
background image position: http://www.hscripts.com/tutorials/css/backp5.php
html layout with div: http://www.w3schools.com/html/html_layout.asp
</pre>

<div id="msg"></div>

<div id="container" style="position: absolute; left: 10px; border: solid; border-color: #cccccc; border-width: 1px;">

<div id="leftpane" style="width:300px; float: left;">

<div id="div1" style="width:300px;height:350px;overflow:auto; padding: 5px; border-color: #cccccc; border-width: 1px;">

<b>Left List 1</b><br/>

content goes here content goes here content goes here content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>


</div>

<!--/td><td-->

<div id="dragbar1" style="background-color:#eeeeee; font-size: 1px; width: 300px; height: 10px; cursor: row-resize; 
background-image: url(handle-h.png); background-repeat: no-repeat; background-position: center; ">
</div>

<div id="div2" style="width:300px;height:350px;overflow:auto; padding: 5px; border-color: #cccccc; border-width: 1px;">

<b>Left List 2</b><br/>

content goes here content goes here content goes here content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

</div>

<div id="dragbar2" style="background-color:#eeeeee; font-size: 1px; width: 300px; height: 10px; cursor: row-resize; 
background-image: url(handle-h.png); background-repeat: no-repeat; background-position: center; ">
</div>

<div id="div3" style="width:300px;height:350px;overflow:auto; padding: 5px; border-color: #cccccc; border-width: 1px;">

<b>Left List 3</b><br/>

content goes here content goes here content goes here content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>
content goes here<br>

</div>

</div> <!--end of left page-->

<div id="dragbarV" style="background-color:#eeeeee; font-size: 1px; width: 10px; height: 700px; cursor: col-resize; 
background-image: url(handle-v.png); background-repeat: no-repeat; background-position: center; float: left; ">
</div>

<div id="divR" style="border: none; width: 800px; height: 700px; float: left; padding: 5px; border-color: #cccccc; border-width: 1px;">
<b>Right Panel</b><br/>
</div>

</div> <!--end of container-->

</body>
</html>
